<template>
  <!-- 兑换记录页 -->
  <div class="body">
    <!-- <div class="header">
      <div>
        <img @click="returnGo" src="../assets/homeimg/滑动左.png" />
        <span>兑换记录</span>
      </div>
    </div> -->
    <div class="main">
      <ul class="list">
        <!-- :to="`/shopInfo/${item.id}`" -->
        <router-link tag="li" class="item" v-for="item in list" :key="item.title" :to="{path: '/recorddetail',query:{id:item.id}}">
          <img :src="item.image" alt class="left-img" />
          <div class="right">
            <div class="title">{{item.name}}</div>
            <div class="text">
              <span class="text-a">{{item.score}}积分</span>
              <span class="text-b">¥{{item.price}}</span>
            </div>
            <div class="time">
              <span>兑换时间：</span>
              <span>{{item.pay_time_text}}</span>
            </div>
          </div>
        </router-link>
      </ul>
    </div>
  </div>
</template>

<script>
import integralApi from "@/api/integral";
export default {
  data() {
    return {
      token: "",
      list: [
        {
          id: 1,
          img: require("../assets/homeimg/课程一.png"),
          title: "网易严选电动牙刷",
          jifen: 12343,
          price: 199,
          time: '2020 - 04 - 10'
        }
      ]
    };
  },
  components: {},
  created() {
    // if (localStorage.getItem("user")) {
    // 	var info = JSON.parse(localStorage.getItem("user"));
    // }
    // this.token = this.$route.query.token;
    // this.token = this.$store.state.token
    this.getorderList();
  },
  methods: {
    returnGo() {
      this.$router.go(-1);
    },
    getorderList(){
      this.$http.post('/api/score/orderList').then(res => {
        // console.log(res)
        this.list = res.data.data;
      })
      // integralApi.orderList({token:this.token}).then(res=>{
      //   console.log(res);
      //   this.list = res.data.data;
      // })
    }
  }
};
</script>

<style scoped lang="scss">
.body {
  color: #333333;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: rgba(247, 247, 247, 1);
  background-size: 100% 100%;
  padding-bottom: 170px;
  
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  height: 2.75rem;
  line-height: 2.75rem;
  padding-top: 1.25rem;
  background: rgba(255, 255, 255, 1);
  color: #333333;
  font-size: 1.25rem;
  img {
    width: 0.625rem;
    height: 1.125rem;
    position: absolute;
    left: 1rem;
    bottom: 0.75rem;
  }
}
.main {
  width: 92vw;
  margin: 0 auto;
  // margin-top: 3.125rem;
  
}
.list {
  list-style: none;
  .item {
    width: 100%;
    height: 6.375rem;
    background: rgba(255, 255, 255, 1);
    border-radius: 0.3125rem;
    margin: 0 auto;
    margin-top: 1.075rem;
    display: flex;
    .left-img {
      width: 6.25rem;
      height: 100%;
      border-radius: 0.3125rem;
      // margin-top: -0.625rem;
      margin-left: 0.625rem;
    }
    .right {
      margin-left: 15px;
      .title {
        font-size: 0.9375rem;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
        display: block;
        margin-top: 0.625rem;
      }
      .text {
        display: flex;
        .text-a {
          font-size: 0.9375rem;
          font-weight: 500;
          color: rgba(255, 38, 79, 1);
          line-height: 2.1875rem;
        }
        .text-b {
          font-size: 0.625rem;
          font-weight: 500;
          text-decoration: line-through;
          color: rgba(153, 153, 153, 1);
          line-height: 2.1875rem;
          margin-left: 0.625rem;
        }
      }
      .time {
        font-size: .75rem;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: rgba(153, 153, 153, 1);
        line-height: 25px;
      }
    }
  }
}
</style>
